<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分析生命周期</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        vm的生命周期:
            将要创建  ===> 调用beforeCreate函数
            创建完毕  ===> 调用created函数
            将要挂载  ===> 调用beforeMount函数
       (重要)挂载完毕 ===> 调用mounted函数  ==============>重要的钩子函数
            将要更新 ===> 调用beforeUpdate函数
            更新完毕 ===> 调用updated函数
      (重要)将要摧毁 ===> 调用beforeDestroy函数 ===============>钩子函数
            摧毁完毕 ===> 调用destoryed函数


        注意:
            常用的生命周期钩子:
                1.mounted:发送ajax请求，启动定时器、绑定自定义事件、订阅消息等【初始化操作】
                2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等

            关于销毁Vue实例:
                1.销毁后借助vue开发者工具看不到任何信息
                2.销毁后自定义事件会失效，但原生的DOM事件依然有效
                3.一般不会在beforeDestory函数操作数据，因为即使操作数据，也不会触发更新流程
    -->

    <div id="root">
        <h2>当前 n 值 是: {{n}}</h2> <br><br>
        <button @click="add">点我n+1</button>
    </div>





    <script>
        let vm = new Vue({
            el:"root",
            data() {
                return {
                    
                }
            },
            //此时无法通过vm访问到data中的数据，methods中的方法
            beforeCreate() {
                
            },
            //此时可以通过vm访问到data中的数据，methods中的方法
            created() {
                
            },
            //上一节代码
            mounted() {
                
            },
            //挂载DOM之前的钩子函数
            beforeMount() {
                
            },




            //数据和页面都是新的
            updated() {
                
            },
            //数据是新的，页面是久的
            beforeUpdate() {
                
            },
            //销毁Vue实例的钩子函数，一般用于清除定时器、解绑自定义事件、取消订阅消息等(此函数操作数据不触发数据更新流程)
            beforeDestroy() {
                
            },
            //一般不使用
            destroyed() {
                
            },
            
        })
    </script>

    
</body>
</html>